<template>
    <!-- 5. 深度监听 -->
    <div>
        <p>{{obj.age}}</p>
        <button @click="obj.age+=10">+10</button>
        <hr>
        <p>{{obj1.age}}</p>
        <button @click="obj1.age+=20">+20</button>
    </div>
</template>

<script>
export default {
    name:'',
    components: {

    },
    props: {

    },
    data() {
        return {
            obj:{
                name: 'haha',
                age: 10
            },
            obj1:{
                name: 'haha',
                age: 10
            }
        };
    },
    methods: {

    },
    watch: {
        obj:{
            handler(newVal,oldVal){
                console.log('obj有属性发生变化！',newVal,oldVal)
                // 开启深度监听会监听到对象的属性一旦有变化，就会执行handler函数
                // 但是上面的 newVal,oldVal输出都一样...
                // 所以 这种对象的深度监听写法重点在于监听各个属性的变化！
            },
            deep:true
        },
        // 如果非要监听对象某个值的变化可采用以下方式
        'obj1.age':{
            handler(newVal,oldVal){
                console.log('obj1.age发生变化！',newVal,oldVal)
            }
        }
    },
    created() {

    },
    mounted() {

    }
};
</script>

<style scoped lang="less">

</style>
